<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>国庆农资人下地记</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/mui.css" />

		<link rel="stylesheet" type="text/css" href="css/animate.css" />

		<style type="text/css">
			body {
				display: none;
				background: #000000;
			}
			
			#first_page {
				width: 100vw;
				background: #000000;
				min-height: 100vh;
				padding-top: 0;
			}
			
			.zhuli_list {
				margin: 0 45px;
			}
			
			.zhuli_box {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 15px;
			}
			
			.pic .head {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				display: block;
			}
			
			.pic {
				width: 64px;
				height: 64px;
				position: relative;
				border-radius: 50%;
				border: 2px solid rgb(153, 153, 153);
				background: rgb(193, 193, 193);
				margin: 0 auto;
			}
			
			.pic.active {
				border: 2px solid #fff;
			}
			
			.star {
				position: absolute;
				width: 26px;
				/*height: 20px;*/
				top: -8px;
				left: 0;
			}
			
			.uname {
				font-size: 16px;
				color: #fff;
				flex-grow: 1;
				padding: 10px;
			}
			
			.zhuli_result {
				font-size: 14px;
				color: rgb(192, 192, 192);
			}
			
			.zhuli_result.success {
				color: rgb(255, 210, 0);
			}
			
			.btn_box {
				width: 61vw;
				margin: 13px auto 15px;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
			}
			
			.btn_box img {
				width: 28.8vw;
				height: 11.7vw;
				display: block;
			}
			
			.focusus {
				width: 61vw;
				height: 44px;
				line-height: 40px;
				border: 2px solid #FFFFFF;
				color: #fff;
				text-align: center;
				margin: 0 auto 0;
				border-radius: 5px;
				font-size: 18px;
			}
			
			.qrcode_container {
				position: fixed;
				z-index: 400;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(0, 0, 0, .6);
			}
			
			.qrcode_card {
				width: 80vw;
				text-align: center;
				margin: 0 auto;
				background: #FFF;
				top: 10vh;
				position: relative;
				border-radius: 8px;
			}
			
			.qrcode_card:before {
				display: table;
				content: '';
			}
			
			.qrcode {
				margin: 48px auto 20px;
				width: 48vw;
				height: 48vw;
				display: block;
			}
			
			.card_close {
				position: absolute;
				right: 15px;
				top: 15px;
				width: 20px;
				height: 20px;
			}
			
			.finger {
				width: 30vw;
				height: 30vw;
				display: block;
				margin: 0 auto 30px;
			}
			
			.card_bottom {
				border-radius: 0 0 8px 8px;
				background: rgb(207, 228, 255);
				color: rgb(40, 40, 40);
				font-size: 17px;
				height: 40px;
				line-height: 40px;
			}
			
			.father {
				color: #fff;
				position: relative;
				left: 50vw;
				transform: translate(-50%, -60px);
				float: left;
			}
			
			.pic_tag {
				position: absolute;
				font-size: 10px;
				color: #fff;
				height: 20px;
				line-height: 20px;
				left: 50%;
				width: 50px;
				text-align: center;
				overflow: hidden;
				top: 55px;
				transform: translate(-50%);
				border-radius: 20px;
				background: rgb(255, 102, 32);
			}
			
			.father_name {
				margin-top: 17px;
				text-align: center;
				max-width: 95px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.magic_container {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				align-items: flex-start;
				clear: both;
				width: 100%;
				padding: 0 15px;
				margin-top: 140px;
			}
			
			.magic_container .pic_tag {
				background: rgb(255, 180, 0);
			}
			
			.helper {
				width: 64px;
				color: #fff;
				position: relative;
			}
			
			.arr1 img,
			.arr2 img {
				width: 37px;
			}
			
			.helper2 {
				top: -40px;
			}
			
			.pic span {
				display: block;
				width: 60px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-size: 30px;
				color: rgb(102, 102, 102);
			}
			
			.zhuli_text {
				text-align: center;
				color: #fff;
				/*margin-top: 100px;*/
			}
			
			.zhuli_restul {
				margin-top: 50px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				font-size: 18px;
				margin-bottom: 16px;
				color: rgb(255, 210, 0);
			}
			
			#special_page {
				z-index: 300;
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				overflow: hidden;
				background: rgba(0, 0, 0, .8);
				color: #fff;
				box-sizing: border-box;
				padding: 15px;
			}
			
			.special_bar {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				/*align-items: center;*/
			}
			
			.bar_list {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				flex-grow: 1;
				padding-bottom: 10px;
				border-bottom: 1px solid #FFF;
			}
			
			.tab {
				flex-shrink: 0;
				width: 100%;
				text-align: center;
				position: relative;
				border-right: 1px solid #FFFFFF;
				font-size: 16px;
			}
			
			.tab:last-child {
				border: none;
			}
			
			.tab img {
				position: absolute;
				width: 75px;
				height: 11px;
				bottom: -19.5px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.close_btn {
				border-bottom: 1px solid #FFF;
				padding-bottom: 10px;
			}
			
			.close_btn img {
				width: 36px;
				height: 36px;
				display: block;
			}
			
			.current_sta {
				min-height: 30px;
				padding-top: 20px;
				/*line-height: 60px;*/
				font-size: 14px;
			}
			
			.rank {
				position: absolute;
				top: 62px;
				left: 15px;
				right: 15px;
				bottom: 104px;
				overflow: scroll;
			}
			
			.act_info {
				position: absolute;
				top: 62px;
				left: 15px;
				right: 15px;
				bottom: 101px;
				overflow: scroll;
			}
			
			.borde_title {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
			}
			
			.borde_title div {
				width: 25%;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
			
			.borde_content {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
			}
			
			.borde_content div {
				width: 25%;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
				white-space: nowrap;
				padding: 0 5px;
			}
			
			.borde_content img {
				width: 49px;
				border-radius: 50%;
			}
			
			.borde_content {
				padding: 10px 0;
				border-bottom: 1px solid rgba(255, 255, 255, .6);
			}
			
			.borde_content:last-child {
				border: none;
			}
			
			.about {
				position: fixed;
				bottom: 30px;
				left: 50%;
				transform: translateX(-50%);
				width: 230px;
				text-align: center;
				height: 44px;
				line-height: 40px;
				border: 2px solid #fff;
				color: #fff;
				background: transparent;
				border-radius: 8px;
				font-size: 18px;
			}
			
			.get {
				position: fixed;
				bottom: 89px;
				left: 50%;
				transform: translateX(-50%);
				width: 230px;
				text-align: center;
				height: 44px;
				line-height: 40px;
				background: transparent;
				color: rgb(231, 163, 0);
				border: 2px solid rgb(231, 163, 0);
				border-radius: 8px;
				font-weight: bold;
				font-size: 18px;
				box-sizing: border-box;
			}
			
			.act_title {
				margin: 15px 0;
				height: 30px;
				line-height: 30px;
				background: #FFF;
				width: 90px;
				text-align: center;
				color: rgb(40, 40, 40);
				font-size: 16px;
			}
			
			.act_detail {
				font-size: 14px;
				color: #fff;
				margin-bottom: 25px;
			}
			
			.bags {
				position: absolute;
				width: 20vw;
				height: 21.5vw;
				top: 6px;
				right: 0;
				z-index: 13;
				animation: bigsmall2 2s ease-in-out infinite;
			}
			
			@keyframes bigsmall2 {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(1.2);
				}
				100% {
					transform: scale(1);
				}
			}
		</style>
	</head>

	<body>

		<div id="app">

			<div id="first_page">
				<img src="imgs/helpad.png" style="width: 95.6vw;height: 43.9vw;margin: 0 auto 26px;display: block;" />
				<img src="imgs/bags.png" class="bags" @click="showbag" />
				<div class="father">
					<div class="pic active">
						<img :src="fatherhead" class="head" />
						<img src="imgs/tstar.png" class="star" />
					</div>
					<div class="pic_tag">
						发起人
					</div>
					<div class="father_name">
						{{fathername}}
					</div>
				</div>

				<div class="magic_container">
					<div class="helper ">
						<div class="pic" :class="{'active':!!list[0]}">
							<img :src="list[0].userImg" v-if="list[0]" class="head" />
							<img :src="list[0]&&list[0].userImg?'imgs/star.png':'imgs/nostar.png'" class="star" />
							<span v-if="!list[0]">?</span>
						</div>
						<div class="pic_tag" v-if="list[0]">
							助力人
						</div>
						<div class="father_name" v-if="list[0]">
							{{list[0].userName}}
						</div>
					</div>
					<div class="arr1">
						<img src="imgs/arr1_1.png" />
					</div>
					<div class="helper helper2">
						<div class="pic" :class="{'active':!!list[1]}">
							<img :src="list[1].userImg" v-if="list[1]" class="head" />
							<img :src="list[1]&&list[1].userImg?'imgs/star.png':'imgs/nostar.png'" class="star" />
							<span v-if="!list[1]">?</span>
						</div>
						<div class="pic_tag" v-if="list[1]">
							助力人
						</div>
						<div class="father_name" v-if="list[1]">
							{{list[1].userName}}
						</div>
					</div>
					<div class="arr2">
						<img src="imgs/arr2_1.png" />
					</div>
					<div class="helper ">
						<div class="pic" :class="{'active':!!list[2]}">
							<img :src="list[2].userImg" v-if="list[2]" class="head" />
							<img :src="list[2]&&list[2].userImg?'imgs/star.png':'imgs/nostar.png'" class="star" />
							<span v-if="!list[2]">?</span>
						</div>
						<div class="pic_tag" v-if="list[2]">
							助力人
						</div>
						<div class="father_name" v-if="list[2]">
							{{list[2].userName}}
						</div>
					</div>
				</div>
				<!--<div class="zhuli_list">
					<div class="zhuli_box">
						<div class="pic active">
							<img src="imgs/test.png" class="head" />
							<img src="imgs/star.png" class="star" />
						</div>
						<div class="uname">
							Bronya
						</div>
						<div class="zhuli_result success">
							助力成功
						</div>
					</div>
				</div>-->
				<div class="zhuli_restul">
					{{helped?'助力成功！':''}}
				</div>
				<div class="zhuli_text">
					已有{{list.length>=3?3:list.length}}人，{{list.length==2?'只差最后1位了':list.length>=3?'目标达成！':'还差'+(3-list.length)+'位好友'}}
				</div>

				<div class="btn_box">
					<img src="imgs/zhuli.png" @click="zhuli" />

					<img src="imgs/wantplay.png" @click="wantplay" />
				</div>
				<!--<div class="focusus" @click="showcode=true">
					关注我们
				</div>-->
			</div>

			<div class="qrcode_container" v-if="showcode">
				<div class="qrcode_card">
					<img src="imgs/cancel2.png" class="card_close" @click="showcode=false" />

					<img src="imgs/mtnz.png" class="qrcode" />

					<div style="font-size: 18px;color:#000;margin-bottom: 20px;">
						长按识别二维码
					</div>

					<img src="imgs/finger.png" class="finger" />

					<div class="card_bottom">
						关注每天农资 了解更多活动进度
					</div>
				</div>
			</div>

			<div id="special_page" v-if="showspecial">

				<div class="special_bar">
					<div class="bar_list">
						<div class="tab">
							活动说明
							<!--<img src="imgs/selected.png" />-->
						</div>
					</div>
					<div class="close_btn" @click="showspecial=false">
						<img src="imgs/cancel1.png" />
					</div>
				</div>

				<div class="act_info">
					<!--<div class="act_title">
						活动说明
					</div>-->
					<div class="act_detail" style="margin-top: 15px;">
						<span style="color: #ef7600;font-size: 16px;">“国庆农资人下地记”，10万好礼大放送！</span><br /><br />游戏只要达到 <span style="color: #ef7600;font-size: 16px;">200分</span> 以上的，即可参与抽奖。<br />（每人每天有3次抽奖机会）<br />
						<br /> 每人每天有3次游戏机会，3次用完以后，可邀请好友来助力，每3人助力可获得1张复活卡。<br />（每人每天最多可以获得1张复活卡，每张复活卡有2次游戏机会）
					</div>
					<div class="act_title">
						活动奖品
					</div>
					<div class="act_detail">
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">1.成绩排行榜前3名，现金奖励：</span><span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;color: #ef7600;"> 第1名现金800元，第2名500元，第3名100元</span>（如果相同分数，参与游戏时间早的默认排名靠上）<br />
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">2.随机抽奖，奖品多多：</span> <span style="color: #ef7600;">病害图谱挂图；吡唑醚菌酯配方手册；200g磷酸二氢钾；100g微多好；第二届零售商野蛮生长书；国庆植保+营销资料大礼包（两届野蛮生长视频+公益课文字及录音+周5不寂寞录音+植保资料……）</span>
						<br />
						<!--<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">(3)书籍类：</span> 野蛮生长，图谱挂图，吡唑手册，蔬菜植保书……
						<br />-->

					</div>
					<div class="act_title">
						活动时间
					</div>
					<div class="act_detail">
						国庆7天乐不停，2018年9月30日20:00——2018年10月7日20:00
					</div>
					<div class="act_title">
						奖品领取
					</div>
					<div class="act_detail">
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">1.现金领取：</span> 活动结束之后，现金奖3个工作日内，将会在每天农资公众号公布获奖名单和领奖方式。<br />
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">2.随机抽奖奖品：</span> 所有产品进入账户后，需要登录农极客app，进入“个人中心—活动专区—点击领取”，查看并提交相关邮寄信息后，将会有专人电话通知邮寄。
					</div>
					<div class="act_title">
						主办单位
					</div>
					<div class="act_detail">
						每天农资、农极客 <br /><br /> 活动最终解释权归每天农资、农极客所有。
					</div>

				</div>

				<div class="about" @click="showcode=true">
					关注我们
				</div>

			</div>

		</div>

		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>

		<script type="text/javascript">
			mui.init();

			function getUrlString() {
				var urlStr = window.location.search; //?sex=man&age=20
				console.log(urlStr);
				if(urlStr != null && urlStr.toString().length > 1) {
					var myUrlStr = urlStr.substr(1); //sex=man&age=20
					var array1 = myUrlStr.split("&"); //["sex=man"],["age=20"]
					var getString = {};
					for(var i = 0; i < array1.length; i++) {
						getString[array1[i].split("=")[0]] = array1[i].split("=")[1]; //["sex","man"]["age","20"]
					}
					return getString;
				} else {
					console.log("无参数");
				}
			}

			function loadwx() {
				$.ajax({
					type: "POST",
					url: "https://m.nongjike.cn/NJK/app/WeiXinResearc",
					async: true,
					data: {
						url: location.href.split('#')[0],
						RESEARCH_ID: 150
					},
					ContentType: 'application/json; ',
					success: function(data) {
						data = $.parseJSON(data);
						console.log(data);

						vobj.loaded = true;

						var tt = fathername + "正在努力赢取复活卡，邀请你来助力！";
						var fname = encodeURI(fathername);
						var JIANJIE = "国庆农资人下地记，奖品拿不停";
						var u = "http://www.meitiannongzi.com/nongjike/game/share.html?name=" + fname + "&id=" + fatherid + "&img=" + fatherhead;

						wx.config({
							//							debug: true,
							appId: data.appId,
							timestamp: data.timestamp,
							nonceStr: data.nonceStr,
							signature: data.signature,
							jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', "chooseImage", "getLocalImgData"] // 必填，需要使用的JS接口列表
						});
						wx.ready(function() {
							console.log("wxAPI-ready")
							wx.onMenuShareTimeline({ //分享到朋友圈
								title: tt, //data.researc.SUBJECT, // 分享标题
								link: u + "&ADTAG=fxy.pyq", // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareAppMessage({ //分享给朋友
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u + "&ADTAG=fxy.hy", // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareQQ({ //分享到QQ
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareWeibo({ //分享到腾讯微博
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u, // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareQZone({ //分享到QQ空间
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u, // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});

						});
					}
				});
			}

			function getUserinfo(str) {
				$.ajax({
					type: "get",
					//					url: "https://m.nongjike.cn/NJK/app/access_tokenUnionid",
					url: "http://www.meitiannongzi.com/under/weixinApp/getWxUsersss",
					async: true,
					data: {
						code: str
					},
					success: function(data) {
						var data = $.parseJSON(data);
						console.log(data);
						if(!data.wxUser) {
							location.replace(href);
							return false;
						}

						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/register",
							async: true,
							data: {
								openId: data.wxUser.openId,
								userName: data.wxUser.nickname,
								userImg: data.wxUser.headImgUrl
							},
							success: function(res) {
								//							console.log(res);
							}
						});

						var unionid = data.wxUser.unionid;
						local['unionid'] = data.wxUser.unionid;

						local['userinfo'] = JSON.stringify(data.wxUser);

						local['openid'] = data.wxUser.openId;

						vobj.headurl = data.wxUser.headImgUrl;

						vobj.find();

					}
				});
			}

			//调用方法
			var gus = new getUrlString();

			var code = gus.code;

			var url = location.href.split("#")[0];

			var appid = "wx3f6627be4ed503c9";
			url = encodeURIComponent(url);

			var fathername = decodeURI(gus.name),
				fatherid = gus.id,
				fatherhead = gus.img;

			var href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + url + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"

			var local = window.localStorage,
				session = window.sessionStorage;

			var vobj = new Vue({
				el: "#app",
				data: {
					goodman: 2,
					badman: 1,
					fathername: fathername,
					fatherhead: fatherhead,
					showcode: false,
					helped: false,
					list: [],
					showspecial: false,
					hasdo: false,
				},
				methods: {
					zhuli: function() {
						MtaH5.clickStat("help")
						if(local['openid'] == fatherid) {
							mui.alert("你不能助力你自己！");
							return false;
						} else if(this.helped) {
							mui.alert("你已经助力过该好友！");
							return false;
						}
						if(this.hasdo) {
							return false;
						}
						this.hasdo = true;
						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/superposition",
							async: true,
							data: {
								openId: fatherid,
								openId_p: local['openid'],
							},
							success: function(res) {
								var data = JSON.parse(res);
								console.log(data);
								if(data.code == 2) {
									mui.alert(data.message);
								} else if(data.code == 1) {
									MtaH5.clickStat("helpful");
									mui.alert("助力成功");
									vobj.helped = true;
									vobj.find();
								}
							}
						});
					},
					find: function() {
						$.ajax({
							type: "get",
							url: "https://m.nongjike.cn/NJK/app/gameController/findInviteByOpenId",
							async: true,
							data: {
								openId: fatherid
							},
							success: function(res) {
								var data = JSON.parse(res);
								console.log(data);
								$("body").show();
								if(data.code == 1) {
									vobj.list = data.list;
									for(var i = 0; i < data.list.length; i++) {
										if(data.list[i].openId == local['openid']) {
											vobj.helped = true;
										}
									}
								} else {
									mui.alert("获取助力列表失败！");
								}
							}
						});
					},
					wantplay: function() {
						MtaH5.clickStat("want")
						location.replace("http://www.meitiannongzi.com/nongjike/game/index.html")
					},
					showbag: function() {
						this.showspecial = true
						MtaH5.clickStat("bag2")
					}
				},
				mounted: function() {

					if(!code) {
						location.href = href;
						return false;
					} else if(!!code) {
						getUserinfo(code);
					}

					loadwx();

				}
			});
		</script>

		<script>
			var _mtac = {
				"performanceMonitor": 1,
				"senseQuery": 1
			};
			(function() {
				var mta = document.createElement("script");
				mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
				mta.setAttribute("name", "MTAH5");
				mta.setAttribute("sid", "500648578");
				mta.setAttribute("cid", "500648584");
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(mta, s);
			})();
		</script>
	</body>

</html>